import { Image, StyleSheet, TouchableOpacity } from "react-native";
import { useEffect } from "react";
// @ts-ignore
import icon_add from '../../assets/images/icon_add.png';
/* 
- 高阶函数：一个函数接受的参数为函数 或者返回值是一个新函数  则该函数就是高阶函数
- 高阶组件：如果一个组件的参数是组件，返回值是一个新组件 则该组件就是高阶组件
*/

/* 
- 定义 react通用的组件 类型
*/
type IReactComponent =
  | React.ComponentClass
  | React.FunctionComponent
  | React.ForwardRefExoticComponent<any>;


export default <T extends IReactComponent>(OriginView: T): T => {

  // 模拟上报设备信息
  // useEffect(() => {
  //   reportDeviceInfo()
  // }, [])

  // const reportDeviceInfo = () => {
  //   // 模拟上报
  //   const deviceInfo = {
  //     deviceId: 1,
  //     deviceName: '',
  //     modal: '',
  //     storage: 0,
  //     ip: '',
  //   };
  //   reportDeviceInfo(deviceInfo);
  // }


  // 定义一个高阶组件
  const HOCView = (props: any) => {
    return (
      <>
        {/* 首先返回原始的组件 以及携带的属性和方法 */}
        <OriginView  {...props} />
        {/* 再加上自己需要的 按钮 */}
        <TouchableOpacity
          style={styles.addButton}
          onPress={() => {
            console.log(`onPress ...`);
          }}
        >
          <Image style={styles.addImg} source={icon_add} />
        </TouchableOpacity>
      </>
    )
  }
  return HOCView as T
}

const styles = StyleSheet.create({
  addButton: {
    position: 'absolute',
    bottom: 80,
    right: 28,
  },
  addImg: {
    width: 54,
    height: 54,
    resizeMode: 'contain',
  },
});